/*当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）它将整个页面的所有元素都映射为js对象，这样我们可以在js中操作页面中的元素。
可以查看同级目录的DocumentObjectModel.gif图片理解文档模型的结构
 */
//比如我们想获取页面中某个输入框的内容，可以从DOM中获取此输入框的对象,在console控制台输入
document.getElementById("pwd").value
//通过document对象，我们可以快速获取页面对应的元素，也可以获取元素的属性。比如结合事件,进行密码长度的校验，长度小于6 则不合法，密码框变红。
//先编写一个css样式,见同级目录 pwdCheck.css
//     .illegal-pwd{
//     border: red 1px solid !important;
//     box-shadow: 0 0 5px red;
// }

//再编写一个js，定义一个函数，此函数接受一个参数（元素对象本身）检测输入的长度是否大于6，不大于6 就把当前元素的class属性设定为css指定的class，见同级目录checkIllegal.js
// function checkIllegal(e) {
//     if (e.value().length < 6) {
//         e.setAttribute("class", "pwdCheck")
//     }else {
//         e.removeAttribute("class")
//     }
// }

//最后将此函数绑定到oninput事件即可，见同级目录login.html，注意传入了一个this，这里的this代表是输入框元素本身
// <input id=pwd type="password" placeholder="请输入密码" onInput="checkIllegal(this)">
// 现在我们把css和js都引入到login.html，当输入的时候，会自动检查密码是否小于6位，小于6位则输入框变红